<template>
	<view class="pages">
		<cu-custom bgColor="uerHead1" :isBack="true" textRight="true" type="1" @clickRight="clickRecord()">
			<block slot="backText" class="titilestyle">{{title}}</block>
			<!-- 	<block slot="right" class=""><text class="cuIcon-info"></text></block> -->
		</cu-custom>

		<view class="boxes middle flex flex-direction" v-if="!postInfo">
			<view class="  no-status">

			</view>

			<view class="tips margin-sm text-gray">
				您还没有创建简历 现在去编写吧~
			</view>
			<button class="cu-btn round shadow lg bg-blue margin-sm"
				@click="junpTo('/app/Offer/pages/resume/editBasic')">创建简历</button>
		</view>


		<scroll-view scroll-y="true" v-else :style="{height:swiperHeight+'px'}" v-if="postInfo">
			<view class="inro-card  flex  flex-direction">
				<view class="flex inro-card-fill" @click="junpTo('/app/Offer/pages/resume/editBasic')">
					<view class="basis-xl margin-xs flex flex-direction  justify-around"
						:class="postInfo?'':'loading-box'">
						<view class="text-cut ">
							<text class=" text-bold text-xl">
								{{postInfo.name || "未填写"}}
							</text>
							<text class="cuIcon-edit edit-icon"></text>
						</view>

						<view class="text-gray flex justify-between text-sm padd-top">
							<view class="basis-xll  align-center  radius text-cut text-gray ">
								<text v-if="postInfo.gender!=-1" class="padding-right">{{sex[postInfo.gender]}}</text>
								<text class="padding-right" v-if="postInfo.birthday">{{age(postInfo.birthday)}} </text>
								{{postInfo.phone || ""}}
							</view>

						</view>

					</view>

					<!-- 	<view class="basis-xs flex justify-end"> -->
					<!-- <view class="cu-avatar round xl bg-blue">
							<text class="cuIcon-profile"></text>
						</view> -->
					<!-- 	</view> -->


				</view>




				<view @click="junpTo('/app/Offer/pages/resume/editBasic')"
					class="flex inro-card-fill flex-direction margin-xs  flex flex-direction  justify-around"
					:class="postInfo?'':'loading-box'">

					<view class="text-cut">
						<text class="text-bold text-xl">
							求职意向
						</text>
					</view>
					<view class="text-gray flex justify-between text-sm">
						<view class="basis-xl  align-center  radius text-cut" v-if="postInfo.job">
							{{postInfo.job || ""}}
							<text class="padding-lr" v-if="postInfo.job &&  postInfo.min_price"> | </text>
							{{postInfo.min_price/1000+"k-"}}{{postInfo.max_price!=0?postInfo.max_price/1000+"k":""}}
						</view>
						<view class="basis-xl  align-center  radius text-cut" v-else="postInfo.intent">还未填写</view>
						<view class="basis-xs  flex align-center justify-end  radius">
							<view class="cuIcon-right"></view>
						</view>
					</view>
				</view>


			</view>

			<!-- 	教育经历 -->

			<view class="inro-card  flex  flex-direction margin-top">
				<view class="flex inro-card-fill">
					<view class="basis-xl margin-xs flex flex-direction  justify-around ">
						<view class="text-cut ">
							<text class="text-bold text-xl">
								教育经历
							</text>
						</view>

					</view>

					<view class="basis-xs margin-xs  flex align-center justify-end"
						@click="junpTo('/app/Offer/pages/resume/editEdu')">
						<view class="cuIcon-roundadd ">

						</view>
					</view>
				</view>

				<view v-for="(item,index) in postInfo.study"
					@click="junpTo('/app/Offer/pages/resume/editEdu?index='+index)"
					class="flex inro-card-fill flex-direction margin-xs  flex flex-direction  justify-around border-bottom"
					:class="postInfo.study?'':'loading-box'">
					<view class="text-cut ">
						<text class=" text-bold title-name">
							{{item.school_name || ""}}
						</text>
					</view>
					<view class="text-gray flex justify-between text-sm">

						<view class="basis-sm  align-center  radius text-cut">
							<text v-if="item.school" class="padding-right">{{item.school}}</text>
							<text v-if="item.major" class="padding-right">{{item.major }}</text>
						</view>
						<view class="basis-lg  flex align-center justify-end  radius">
							{{sliceTime(item.start_at)}}-{{sliceTime(item.end_at)}}
							<view class="cuIcon-right"></view>
						</view>

					</view>
				</view>


			</view>

			<!-- 	工作经历 -->
			<view class="inro-card  flex  flex-direction margin-top">
				<view class="flex inro-card-fill">
					<view class="basis-xl margin-xs flex flex-direction  justify-around ">
						<view class="text-cut ">
							<text class=" text-bold text-xl">
								工作经历
							</text>
						</view>

					</view>

					<view class="basis-xs margin-xs  flex align-center justify-end"
						@click="junpTo('/app/Offer/pages/resume/editExper')">
						<view class="cuIcon-roundadd  ">

						</view>
					</view>
				</view>

				<view v-for="(item,index) in postInfo.work"
					@click="junpTo('/app/Offer/pages/resume/editExper?index='+index)">
					<view
						class="flex inro-card-fill flex-direction margin-xs  flex flex-direction  justify-around border-bottom">
						<view class="text-cut ">
							<text class=" text-bold title-name">
								{{item.company_name || ""}}
							</text>
						</view>
						<view class="text-gray flex justify-between text-sm ">
							<view class="basis-sm  text-cut align-center  radius">{{item.job || ""}}</view>
							<view class="basis-lg  flex text-cut align-center justify-end  radius">
								{{sliceTime(item.start_at)}}-{{sliceTime(item.end_at)}}
								<view class="cuIcon-right"></view>
							</view>

						</view>

					</view>
					<view
						class="flex inro-card-fill flex-direction margin-xs margin-top flex flex-direction  justify-around border-bottom">
						<view class="text-cut ">
							<text class=" text-bold title-name text-content">
								工作内容
							</text>
						</view>
						<view class="text-gray flex  flex-wrap justify-between text-sm ">
							<view class="basis-xll text-content   align-center  radius desc-box">
								{{item.desc}}
							</view>


						</view>
					</view>

				</view>



			</view>

			<!-- 附件简历 -->
			<view class="inro-card  flex  flex-direction margin-top" >
				<view class="flex inro-card-fill">
					<view class="basis-xl margin-xs flex flex-direction  justify-around ">
						<view class="text-cut ">
							<text class=" text-bold text-xl">
								附件简历
							</text>
						</view>
					</view>

					<view class="basis-xs margin-xs  flex align-center justify-end" @click="addResme">
						<view class="cuIcon-roundadd text-bold ">

						</view>
					</view>
				</view>

				<view  v-for="(item,index) in postInfo.enclosure"
					class="flex inro-card-fill flex-direction margin-xs margin-top flex flex-direction  justify-around border-bottom">
					<view class="basis-xll  cu-bar flex justify-between  bg-F7F7F7 align-center  radius">
						<text class="cuIcon-edit edit-icon"></text>
						<view class="basis-xl text-cut align-center  radius" @click="openExpand(index)">
							<text class="text-xl text-blue  text-blod padding-lr">
								附件简历{{index+1}}
							</text>
						</view>
						<view class="basis-xs  flex text-cut middle  radius" @click="delResume(index,0)">

							<text class="cuIcon-delete edit-icon"></text>
						</view>
					</view>

				</view>

				<view v-for="(item,index) in uploadArr" :key="index"
					class="flex inro-card-fill flex-direction margin-xs margin-top flex flex-direction  justify-around border-bottom">

					<view class="basis-xll  cu-bar flex   bg-F7F7F7 align-center  radius">
						<text class="cuIcon-edit edit-icon"></text>
						<view class="basis-xl flex flex-direction  align-stretch padding-lr">
							<view class="text-sm text-cut" style="padding-bottom: 10rpx;">
								上传中...
							</view>

							<view class="cu-progress radius striped active ">
								<view class="bg-cyan" :style="[{ width:item.progress+'%'}]">
									{{item.progress}}%
								</view>
							</view>

						</view>
						<view class="basis-xs  flex text-cut middle  radius" @click="delResume(index,1)">

							<text class="cuIcon-delete edit-icon"></text>
						</view>

					</view>

				</view>

			</view>



			<!-- <view class="padding flex basis-xl flex-wrap middle ">

				<button class="cu-btn lg bg-blue" style="width: 92%;">创建简历</button>
			</view> -->

		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "我的简历",
				postInfo: [],
				card: {
					teach: ""
				},
				loading: false,
				swiperHeight: 0,
				uploadArr: [],
				sex: ['男', '女'],


			}

		},
		onLoad: function() {
			let that = this;
			setTimeout(function() {
				that.loading = true
			}, 500)
		},
		onReady() {
			this.getInfo().then((e) => {
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);
			});
		},
		onShow() {
			this.getReseume();
		},

		methods: {

			/**
			 * @param {Object} age 计算年龄
			 */
			age(str) {
				str = (str.split(" "))[0];
				var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
				if (r == null) return false;
				var d = new Date(r[1], r[3] - 1, r[4]);
				if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]) {
					var Y = new Date().getFullYear();
					return ((Y - r[1]) + "  岁 ");
				}
			},
			sliceTime(time) {
				let t = time.split(" ");
				return t[0];
			},
			/**
			 * 获取我的简历
			 */
			getReseume() {
				this.apiRequest('/buyer/OfferResume', {
				}, 0, "get").then(res => {
					if (res.code == 200) {
						this.postInfo = res.data.resume;

					} else this.error();
				}).catch(() => {
					this.error();
				})
			},
			error() {
				uni.showModal({
					title: "温馨提示",
					content: "请求出错啦",
					showCancel: false,
					success: (e) => {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			/**
			 * 添加附件简历 上传
			 */
			addResme() {
				let uploadFile = (index) => { //上传文件

					let header = {
						'Content-Type': 'multipart/form-data'
					}
					let authorization = uni.getStorageSync('authorization');
					this.$set(header, 'authorization', authorization);
					this.uploadArr[index].upload = uni.uploadFile({

						url:  this.apiHost+'/buyer/OfferPostExt', //仅为示例，非真实的接口地址
						filePath: this.uploadArr[index].path,
						header: header,
						name: 'image',
						success: (uploadFileRes) => {
							
							this.uploadArr=[];
							// this.postInfo.expand=uploadFileRes.data.path;
							
							this.getReseume();
							
						}
					});
					this.uploadArr[index].upload.onProgressUpdate((res) => {
						this.uploadArr[index].progress = res.progress;
						console.log("progress： " + this.uploadArr[index].progress);
					});
				}
				let createTask = () => {
					this.uploadArr.forEach((r, index) => {
						if (typeof r.progress != "undefined" && r.progress != 100) {
							uploadFile(index)
						}
					})
				}
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success: (res) => {
						let dat = {
							filename: res.tempFiles[0].name,
							path: res.tempFiles[0].path,
							upload: {},
							progress: 0,
						}
						
						this.uploadArr.push(dat);
						createTask();
					}
				})
				//#endif
			},
			/**
			 * 打开简历
			 */
			openExpand(index){
				uni.openDocument({
					filePath:this.postInfo.enclosure[index].href,
					fail: (e) => {
						console.log(e);
						uni.showToast({
							title:e.errMsg,
							icon:"none"
						})
					}
					
				})
			},


			/**
			 * 删除简历
			 */
			delResume(index,type) {
				if (type == 0)
					uni.showModal({
						title: "删除提醒",
						content: "是否删除当前简历重新上传？",
						success: (r) => {
							if (r.confirm) {
								this.postInfo.enclosure.splice(index,1);
								//this.addResme();
			
							}
						}
					})
				else{
					uni.showModal({
						title: "取消提醒",
						content: "是否取消当前上传任务？",
						success: (r) => {
							if (r.confirm) {
								// this.uploadArr=[];
								this.uploadArr.splice(index,1);
	
							}
						}
					})
				}
					

			},


			/**
			 * 计算年龄
			 * @param {Object} num
			 */
			countAge(num) {


			},


			/**跳转
			 * @param {Object} path
			 */
			junpTo(path) {
				console.log("path " + path);
				uni.navigateTo({
					url: path
				})

			},


		}




	}
</script>

<style scoped>
	.loading-box .school-title,
	.loading-box .school-tag {
		min-height: 40rpx;
		max-width: 94%;
		margin-top: 8rpx;
		border-radius: 15rpx;
	}

	.loading-box swiper,
	.loading-box image,
	.loading-box .school-title,
	.loading-box .cu-avatar,
	.loading-box .text-cut {

		background-color: var(--loading-grey);
		background: linear-gradient(100deg,
				rgba(255, 255, 255, 0) 40%,
				rgba(255, 255, 255, 0.5) 50%,
				rgba(255, 255, 255, 0) 60%)var(--loading-grey);
		background-size: 200% 100%;
		background-position-x: 120%;
		animation: 1s loading ease-in-out infinite;
	}

	@-ms-keyframes loading {
		to {
			background-position-x: -20%;
		}
	}

	@keyframes loading {
		to {
			background-position-x: -20%;
		}
	}

	@-webkit-keyframes loading {
		to {
			background-position-x: -20%;
		}
	}

	.title-name {
		font-size: 32rpx;
	}

	.desc-box {
		width: 100%;

		word-wrap: break-word;
	}

	.padd-top {
		padding-top: 15rpx;
	}

	.pages {
		height: 100vh;
		overflow: hidden;
	}

	.cuIcon-roundadd {
		font-size: 42rpx;
	}

	/**
	 * 卡片样式
	 */
	.inro-card {
		width: 92%;
		margin: 20upx auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 30upx;
		position: relative;
	}

	.cuIcon-add {
		font-size: 45rpx;
	}

	.edit-icon {
		font-size: 45rpx;
		padding-left: 15rpx;
	}

	.inro-card-fill {
		width: 100%;
		min-height: 100rpx;
	}

	.bg-F7F7F7 {
		background-color: #F7F7F7;
	}

	.text-split {
		width: 150rpx;
	}

	.cu-progress view {
		width: 0;
		height: 100%;
		align-items: center;
		display: flex;
		justify-items: flex-end;
		justify-content: space-around;
		font-size: 20upx;
		color: #ffffff;
		transition: width 0.6s ease;
	}

	.cu-progress {
		overflow: hidden;
		height: 28upx;
		background-color: #ebeef5;
		display: inline-flex;
		align-items: center;
		width: 100%;
	}

	.cu-progress+view,
	.cu-progress+text {
		line-height: 1;
	}

	.cu-progress text {
		align-items: center;
		display: flex;
		font-size: 20upx;
		color: #333333;
		text-indent: 10upx;
	}

	.cu-progress.striped view {
		background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
		background-size: 72upx 72upx;
	}

	.padding-right {

		padding-right: 10rpx;
	}

	.cu-progress.active view {
		animation: progress-stripes 2s linear infinite;
	}

	@keyframes progress-stripes {
		from {
			background-position: 72upx 0;
		}

		to {
			background-position: 0 0;
		}
	}
</style>
